<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据集管理</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/manager.css">
    <style>
        .item{
            position: relative;
            height: 200px;
            width: 100%;
            /*border: 1px solid #8c939d;*/
        }
        .item img{
            position: absolute;
            left: 20px;
            top: 20px;
            height: 150px;
            width: 150px;
        }
        .text{
            position: absolute;
            top: 20px;
            left: 200px;
        }
        ._button{
            position: absolute;
            right: 100px;
            top: 50px;
        }
        .demo-drawer__footer{
            padding-left: 10%;
        }
    </style>
</head>
<body>
<div id="app">
    文章管理
    <el-button type="success" @click="dialog = true"
               style="position: absolute;top: 15px;right: 50px">添加/管理文章</el-button>
    <div style="margin: 30px"></div>
    <div class="item" v-for="item in article">
        <img :src="item.icon">
        <div class="text">
            <h2>{{item.title}}</h2>
            <p>{{item.context}}</p>
            <p>{{item.author}}</p>
        </div>
        <!--      按钮-->
        <div class="_button">
            <el-button type="primary" @click="edit(item)">编辑</el-button>
            <el-button type="danger" @click="_delete(item)">删除</el-button>
        </div>
    </div>

    <el-drawer
            title="编辑数据"
            :before-close="handleClose"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="60%"
    >
        <div class="demo-drawer__content">
            <el-form :model="editArticle">
                <el-form-item label="文章名称" :label-width="formLabelWidth">
                    <el-input v-model="editArticle.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="editArticle.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文章内容" :label-width="formLabelWidth">
                    <el-input v-model="editArticle.context" autocomplete="off" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="照片" :label-width="formLabelWidth">
                    <el-upload
                            action="/file/upload"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="uploadSuccess"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
        </div>
    </el-drawer>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){
            this.pageInit();
        },
        methods : {
            pageInit(){
                axios({
                    method: 'get',
                    url: '/backgroundData/article',
                }).then((resp)=>{
                    this.article = resp.data.data
                })
            },
            edit(row){
                //弹出抽屉 数据为row
                this.editArticle = row
                this.dialog = true
            },
            _delete(row){
                //确认删除
                axios({
                    method : 'delete',
                    url : '/backgroundData/article/'+row.id,
                }).then((resp)=>{
                    this.$message({
                        type: 'success',
                        message: resp.data.data
                    })
                })
            },
            //-抽屉-----------------------------------------
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？').then(_ => {
                    this.loading = true;
                    //发送请求
                    axios({
                        method : 'post',
                        url : '/backgroundData/article',
                        data : this.editArticle,
                    }).then((resp)=> {
                        if (resp.data.code === 1) {
                            this.$message({
                                type: 'success',
                                message: resp.data.data,
                            })
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.data.msg,
                            })
                        }
                    })
                    this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    }, 1000);
                    this.editArticle = {}
                }).catch(_ => {
                    this.cancelForm()
                });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            //图片上传的许多方法
            handleRemove(file, fileList) {
                // console.log(file);

            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            uploadSuccess(response,file,fileList){
                console.log(file.response.data)
                this.editArticle.icon = '/file/download/'+file.response.data
            },
        },
        data(){
            return {
                article: [
                    {
                        id : null,
                        icon : null,
                        title : null,
                        context : null,
                        author : null,
                    }
                ],
                //抽屉-----------------------------
                editArticle: {
                    id : null,
                    icon : null,
                    title : null,
                    context : null,
                    author : null,
                },
                dialog: false,
                loading: false,
                formLabelWidth: '80px',
                timer: null,
                //图片上传----------------------------------
                dialogImageUrl: '',
                dialogVisible: false,
            }
        }
    })
</script>
</html>